/**
* desc: 转派
* author:wangyz
* time:2023/06/07 14:57:40
*/
<template>
  <el-dialog :title="title" class="audit-dialog" v-bind="$attrs" width="45%" v-on="$listeners">
    <div class="container">
      <div class="select">
        <div class="box">
          <div class="title">可选办理人</div>
          <div class="content">
            <el-tree
              ref="userTree"
              class="userTree-container"
              empty-text
              :data="toSelectdata"
              default-expand-all
              @current-change="currentChange"
              @node-click="userClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span
                  v-if="!data.isLeaf"
                  class="icon jn-iconfont"
                  :class="[node.expanded ? 'icon-folder-open' : 'icon-folder']"
                />
                <span v-else class="icon jn-iconfont icon-user-line" />
                <span>{{ data.label }} {{ data.isLeaf ? data.id : '' }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="box">
          <div class="title">已选办理人</div>
          <div class="content">
            <div v-if="userSelectedName" class="user-select-item">{{ userSelectedName }}</div>
          </div>
        </div>
      </div>
      <div class="message">
        <el-form ref="nextPageForm" :model="form" :rules="rules">
          <el-form-item label="办理意见" prop="opinion">
            <el-input
              v-model="form.opinion"
              class="audit-textarea"
              type="textarea"
              placeholder="请输入办理意见"
              :rows="4"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button class="audit-button" @click="cancel">取 消</el-button>
      <el-button class="audit-button-primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  queryCurrentNodeUser,
  getNextUsersByRole
} from '@/api/workFlow/workFlow'
export default {
  name: 'ReassignPage',
  components: {},
  props: {
    title: {
      type: String,
      default: '项目转派'
    },
    // 流程实例ID
    processInstId: {
      required: true,
      default: ''
    },
    // 办理意见是否必填
    opinionValid: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    orgId: {
      type: String,
      default: ''
    },
    orgIds: {
      type: String,
      default: ''
    },
    orgCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      nodeList: [], // 下一步办理节点
      userSelected: {}, // 已选择的人员节点
      toSelectdata: [], // 可选办理人树型
      actDefIdSelected: '', // 选择的节点
      form: {
        opinion: '' // 办理意见
      },
      rules: {
        opinion: [
          { required: true, message: '请输入办理意见', trigger: 'blur' }
          // { min: 10, message: '至少输入10个字', trigger: 'blur' }
        ]
      },
      finishNode: false
    }
  },
  computed: {
    userSelectedName() {
      return this.userSelected.empName
    }
  },
  watch: {
    opinionValid: {
      handler: function(newVal) {
        if (!newVal) {
          this.rules = {}
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.doSearchNextActivity()
  },
  methods: {
    doSearchNextActivity() {
      queryCurrentNodeUser(this.processInstId).then(res => {
        const { data } = res
        this.doSearchNextUsersByRole(data)
      })
    },
    doSearchNextUsersByRole(item) {
      const param = {
        procInstId: this.processInstId,
        nodeId: item.actDefId,
        userIds: this.userIds,
        orgCode: this.orgCode,
        orgId: this.orgId,
        detailId: item.detailId
      }
      this.actDefIdSelected = item.actDefId
      getNextUsersByRole(param).then(res => {
        this.toSelectdata = res.data
      })
    },
    nodeClick(item) {
      this.nodeList.forEach(i => (i.clicked = false))
      item.clicked = true
      this.doSearchNextUsersByRole(item)
    },
    userClick(data, node) {
      if (data.isLeaf && node.expanded) {
        const { id: empId, label: empName } = data
        this.userSelected = { empId, empName }
      }
    },
    // 提交后返回值
    doEmit() {
      this.$emit('selected', this.userSelected)
      this.$emit('doReassignEntity', {
        processInstId: this.processInstId,
        processDefId: this.processDefId,
        actDefId: this.activityDefId,
        templateId: this.processDefName,
        nodeId: this.actDefIdSelected,
        route: this.route,
        opinion: this.form.opinion,
        finishNode: this.finishNode,
        ...this.userSelected
      })
      this.$emit('update:visible', false)
    },
    confirm() {
      if (!this.finishNode && !Object.keys(this.userSelected).length) {
        this.$message({
          message: '请选择下一节点办理人',
          type: 'error'
        })
        return
      }
      this.opinionValid &&
        this.$refs['nextPageForm'].validate(valid => {
          // 校验通过
          valid && this.doEmit()
        })
      if (!this.opinionValid) {
        this.doEmit()
      }
    },
    cancel() {
      this.$refs['nextPageForm'].resetFields()
      this.$emit('selected', {})
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  .select {
    display: flex;
    align-items: center;

    // width: 750px;
    // height: 330px;
    .box {
      width: 100%;

      &:nth-child(n + 2) {
        margin-left: 10px;
      }
    }

    .title {
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: left;
      font-size: 17px;
      font-weight: 900;
      color: #169bd5;
    }

    .content {
      height: 250px;
      border: 1px solid #ccc;
      overflow: hidden;

      .node-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        width: 100%;
        background-color: #dbdbdb;

        &:hover {
          cursor: pointer;
        }

        &.clicked {
          background-color: rgb(227, 47, 47);
          color: rgb(245, 241, 241);
        }
      }

      .user-item {
        height: 22px;
        line-height: 22px;
      }

      .user-select-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        width: 100%;
        background-color: #dbdbdb;
      }
    }

    .icon {
      margin-right: 6px;
      font-size: 14px;
    }

    ::v-deep .el-icon-caret-right:before {
      content: "";
    }
  }

  .message {
    //margin-top: 10px;
  }
}

.userTree-container {
  height: 250px;
  overflow-y: auto;
}
</style>
